<template>
  <div>
    <!-- 轮播图 -->
    <div class="carousel slide" data-ride="carousel" id="banner">
        <!-- 准备轮播的图片区域 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img :src="src" alt="" class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img :src="src1" alt="" class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img :src="src2" alt="" class="d-block w-100">
            </div>
        </div>
        <!-- 指示符区域 -->
        <ul class="carousel-indicators db-key">
            <li class="active" data-target="#banner" data-slide-to="0"></li>
            <li data-target="#banner" data-slide-to="1"></li>
            <li data-target="#banner" data-slide-to="2"></li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src:'/image/carousel/11087.jpg',
      src1:'/image/carousel/11088.jpg',
      src2:'/image/carousel/11089.jpg',
    }
  },
}
</script>

<style scoped>
.db-key {
  transform: translateY(10px);
}
.db-key li {
  width: 8px;
  height: 8px;
  background-color: #ddd;
  border-radius: 50%; }

.db-key .active {
  background-color: white; }

</style>